<!doctype html>
<html>
	<head>
		<title>WPilot</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
		<script type="text/javascript" src="lib/match.js"></script>
		<script type="text/javascript" src="lib/swfobject.js"></script>
	  <script type="text/javascript" src="lib/FABridge.js"></script>
		<script type="text/javascript" src="lib/web_socket.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="lib/particle.js"></script>
		<script type="text/javascript" src="devices.js"></script>
		<script type="text/javascript" src="gameobjects.js"></script>
		<script type="text/javascript" src="wpilot.js"></script>
		<script>
			// The globallly defined wpilot client. It's global so that the player can
			// access options from the webkit console (or FireBug).
			var wpilot = null;

			// Set location for the WebSocket SWF library.
			WebSocket.__swfLocation = "lib/WebSocketMain.swf";

			function supports_canvas_text() {
			  if (!document.createElement('canvas').getContext) { return false; }
			  var dummy_canvas = document.createElement('canvas');
			  var context = dummy_canvas.getContext('2d');
			  return typeof context.fillText == 'function';
			}

			function unsupported(text) {
				$('#splash').show();
				$('#splash .notice')
		        .css('display', 'block')
		        .text(text);
			}

			/**
			 *  Is called when the document is loaded and ready. Creates a new client.
			 */
			$(document).ready(function() {
				if (WebSocket.__initialize && swfobject.getFlashPlayerVersion()['major'] < 1) {
					return unsupported('Your browser doesnt support WebSocket or Flash');
				}

				if (!supports_canvas_text()) {
					return unsupported('Your browser doesnt support <canvas> or fillText.');
				}

				$('#options').show();

			  var options = $.extend({}, DEFAULT_OPTIONS);
			  var canvas = $('#viewport canvas');

				$('#options input[name="name"]').val(options.name);
				$('#options input[name="fg-sound"]').attr('checked', options.sfx_sound_enabled);
				$('#options input[name="bg-sound"]').attr('checked', options.bg_sound_enabled);

			  $('#options button').click(function(e) {
			    e.preventDefault();
					options.name = $('#options input[name="name"]').val();
					options.sfx_sound_enabled = $('#options input[name="fg-sound"]').attr('checked');
					options.bg_sound_enabled = $('#options input[name="bg-sound"]').attr('checked');
					$('#options').hide();
					$('#splash').show();
			  });

			  $('#splash .server-info a').click(function(e) {
			    e.preventDefault();
			    // jQuery sets display to inline for section-tags. Don't know why, Im now using
			    // display: none instead.
			    $('#splash .server-info').css('display', 'none');
			    $('#splash .notice')
			        .css('display', 'block')
			        .text('Contacting server, please wait...');
					var startime = new Date();
			    $.getJSON('/state', function(state) {
						var ping = ((new Date()) - startime);
			      $('#splash .notice').css('display', 'none');
			      $('#splash .server-info h2').html(state.server_name + '<span>' + state.game_server_url + '</span>');
			      $('#splash .server-info .ping').html('Response time (http)<span>' + ping + ' ms</span>');
			      $('#splash .server-info .map').html('Map name<span>' + state.map_name + '</span>');
			      $('#splash .server-info .players').html('Connected players<span>' + state.no_players + ' of ' + state.max_players + '</span>');
			      $('#splash .server-info button').data('url', state.game_server_url);
			      $('#splash .server-info').css('display', 'block');
			    });
			  });

			  $('#splash .server-info button').click(function(e) {
					e.preventDefault();
			    var url = $(this).data('url');
				  var viewport  = new ViewportDevice(canvas[0], canvas.width(), canvas.height(), options),
				      keyboard  = new KeyboardDevice(document, options),
							sound			= new SoundDevice(options);

					$('#splash .server-info').html('Connecting...');

          $(window).bind("resize", function() {
            if ($("#viewport.fullscreen").length) {
              viewport.update_size(canvas.width(), canvas.height());
            }
          });

				  wpilot = new WPilotClient(options);
				  wpilot.set_viewport(viewport)
				  wpilot.set_input(keyboard);
				  wpilot.set_sound(sound);

				  wpilot.onconnect = function() {
				    $('#splash .server-info').css('display', 'none');
				    $('#splash').css('display', 'none');
				  }

				  wpilot.ondisconnect = function(reason) {
						wpilot.onconnect = null;
						wpilot.disconnect = null;
					  wpilot.set_viewport(null);
					  wpilot.set_input(null);
					  wpilot.set_sound(null);
						wpilot = null;

						viewport.destroy();
						keyboard.destroy();
						sound.destroy();
						viewport = keyboard = sound = null;

				    $('#splash').css('display', 'block');
				    if (reason) {
				      $('#splash .notice')
				          .css('display', 'block')
				          .text('You were disconnected from server "' + reason + '"');
				      setTimeout(function() {
				        $('#splash .server-info a').click();
				      }, 2000)
				    }
				  }

			    wpilot.join(url);
			  });

			  $('.dialog .version').html('WPilot client version ' + CLIENT_VERSION);

			  setTimeout(function() { $('#splash .server-info a').click() }, 500);
			});
		</script>

	</head>
	<body>
		<section id="viewport" class="fullscreen">
			<canvas></canvas>
		</section>
		<section id="splash" class="dialog">
			<h1 class='logo'>WPilot</h1>
			<section class="notice">
				Contacting server, please wait...
			</section>
			<section class="server-info">
				<h2></h2>
				<p class="ping">C</p>
				<p class="map">C</p>
				<p class="players"></p>
				<div class="actions">
					<button>Join server</button> <span> or <a href="#">Refresh</a></span>
				</div>
			</section>
			<p class="version"></p>
		</section>
		<section id="options" class="dialog">
			<h1 class='logo'>WPilot</h1>
			<section>
				<h2></h2>
				<form>
					<p>Welcome to WPilot. Set options below, then click continue.</p>
					<label for="name">Player name</label>
					<input name="name" type="text">
					<label for="bg-sound">Enable background sound</label>
					<input type="checkbox" name="bg-sound" checked>
					<label for="fg-sound">Enable SFX sounds</label>
					<input type="checkbox" name="fg-sound" checked>
				</form>
				<div class="actions">
					<button>Continue</button>
				</div>
			</section>
			<p class="version"></p>
		</section>
	</body>
</html>
